<template>
  <keep-alive>
    <component :is="views[active]"></component>
  </keep-alive>
  <TabBar v-model:active="active">
    <TabBarItem v-for="tab in tabs" :key="tab.id" :icon="tab.icon">{{
      tab.name
    }}</TabBarItem>
  </TabBar>
</template>
<script setup>
import { ref } from 'vue'
import TabBar from './components/TabBar.vue'
import TabBarItem from './components/TabBarItem.vue'
import HomeView from './views/HomeView.vue'
import CateView from './views/CateView.vue'
import CartView from './views/CartView.vue'
import UserView from './views/UserView.vue'
const views = [HomeView, CateView, CartView, UserView]

const tabs = [
  { id: 0, name: '首页', icon: 'fangzi' },
  { id: 1, name: '分类', icon: 'fenlei' },
  { id: 2, name: '购物车', icon: 'gouwuche' },
  { id: 3, name: '我的', icon: 'wode' },
]
const active = ref(0)
</script>
<style scoped></style>
